const path = require('path');
const webpack = require('webpack');
// 导入在内存中生成HTML页面的插件
// 只要是插件，都需要配置在plugins中
const htmlWebpackPlugin = require('html-webpack-plugin');
// vue-loader@15.*必须配置
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 暴露一个配置对象
module.exports = {
    // 指定 入口 和 出口
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'), // 指定打包好的文件输出到那个目录中
        filename: 'bundle.js' // 指定输出的文件名称
    },
    devServer: {
        open: true, //自动打开浏览器
        port: 3000, //设置启动端口
        contentBase: 'src', // 指定托管的根目录
        hot: true // 启动热更新
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            // 创建一个在内存中生成HTML页面的插件
            // 指定模板页面，将来会根据指定路径去生成内存中的页面
            template: path.join(__dirname, './src/index.html'),
            // 指定生成的页面名称
            filename: 'index.html',
        }),
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [
            // 配置处理.css文件的第三方loader规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // 配置处理.less文件的loader规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // 配置处理.sass文件的loader规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // 配置处理图片相关的loader规则
            // limit参数可控制图片是否转为base64
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=245456&name=[hash:8]-[name].[ext]' },
            // 配置处理字体相关的loader规则
            { test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader' },

            // 配置处理ES6高级语法的loader规则
            // 注：必须把node_modules目录排除，原因如下：
            // 如果不排除，则Babel会把node_modules中所有的第三方JS文件都打包编译
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },

            // 配置处理vue文件相关的loader规则
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },
    resolve: {
        alias: {
            // 设置vue被导入时包的路径
            // 'vue$': 'vue/dist/vue.js'
        }
    }
}